<template>
  <div class="login">
    <el-row type="flex" justify="center">
      <el-col :span="16" class="rlc1"><h3>CRM管理系统</h3></el-col>
    </el-row>
    <div style="padding-top: 10px"></div>
    <el-row type="flex" justify="center">
      <el-col :span="8" class="rlc2">
        <el-form
          label-position="right"
          label-width="80px"
          ref="formLabelAlign"
          :model="formLabelAlign"
          :rules="rules"
        >
          <el-form-item label="登录名" prop="userName">
            <el-input
              placeholder="请输入登录名"
              v-model="formLabelAlign.userName"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="userPassword">
            <el-input
              placeholder="请输入密码"
              v-model="formLabelAlign.userPassword"
              show-password
            ></el-input>
          </el-form-item>
          <el-row type="flex" justify="center">
            <el-col :span="18"></el-col>
            <el-col :span="6">
              <el-switch
                v-model="formLabelAlign.userRememberMe"
                active-text="记住我"
                active-color="#13ce66"
              >
              </el-switch>
            </el-col>
          </el-row>
          <div style="padding-top: 10px"></div>
        </el-form>
        <el-button
          type="primary"
          :round="true"
          @click="submitForm('formLabelAlign')"
          style="width: 80%"
          >登录</el-button
        >
        
        <div style="padding-top:10px"></div>
        <el-button type="danger" @click="changeT('客户经理1', '123456')"
          >快速登录 客户经理1</el-button
        >
        <el-button type="danger" @click="changeT('项目主管1', '123456')"
          >快速登录 项目主管1</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        userName: "",
        userPassword: "",
        userRememberMe: false,
      },
      rules: {
        userName: [
          { required: true, message: "请输入登录名!"},
          {
            min: 3,
            max: 10,
            message: "登录名长度在 3 到 10 个字符",
            trigger: "change",
          },
        ],
        userPassword: [
          { required: true, message: "请输入登录密码!", trigger: "blur" },
          {
            min: 6,
            max: 20,
            message: "密码长度在 6 到 20 个字符",
            trigger: "change",
          },
        ],
      },
    };
  },
  created: function () {
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/login/toLogin",
    }).then((response) => {
      // console.log(response);
      if (response.data.type == "OK") {
        this.$store.commit("userData", response.data.data[0]);
        this.$store.commit("toLogin", true);
        this.$axios({
          method: "post",
          crossdomain: true,
          url: "/sys-user/list/" + this.$store.state.userData.name,
        }).then((response) => {
          // console.log(response); //请求成功返回的数据 用户信息
          this.$store.commit("userPower", response.data.data[0][0]);
          // console.log(this.$store.state.userPower);
          this.$router.replace({ path: "/" });
        });

        this.$notify({
          title: "登陆成功啦!",
          message: "欢迎您," + this.$store.state.userData.name,
          type: "success",
          duration: "1000", // 1000ms后关闭
          showClose: false,
        });
        // this.$router.replace({ path: "/" });
      }
    });
  },
  methods: {
    changeT(user, pwd) {
      this.formLabelAlign = {
        userName: user,
        userPassword: pwd,
        userRememberMe: true,
      };
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "post",
            crossdomain: true,
            url: "/login/loginIn",
            data: this.$qs.stringify({
              //这里是发送给后台的数据
              name: this.formLabelAlign.userName,
              password: this.formLabelAlign.userPassword,
              flag: this.formLabelAlign.userRememberMe,
            }),
          }).then((response) => {
            // console.log(response);
            if (response.data.type == "OK") {
              this.$store.commit("userData", response.data.data[0]);
              this.$store.commit("toLogin", true);
              this.$axios({
                method: "post",
                crossdomain: true,
                url: "/sys-user/list/" + this.$store.state.userData.name,
              }).then((response) => {
                // console.log(response); //请求成功返回的数据 用户信息
                this.$store.commit("userPower", response.data.data[0][0]);
                this.$router.replace({ path: "/" });
              });
              this.$notify({
                title: "登陆成功啦!",
                message: "欢迎您," + this.$store.state.userData.name,
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              // this.$router.replace({ path: "/" });
            } else {
              this.$notify({
                title: "出错啦",
                message: response.data.msg,
                type: "error",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "用户名和密码必须要符合规范哟",
            type: "error",
            position: "top-right",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>

<style>
.rlc1 {
  background-color: palegreen;
}
</style>
